<template>
	<div class="content">
		<div class="content-header">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>系统管理</el-breadcrumb-item>
				<el-breadcrumb-item>
					<b>菜单管理</b>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content-body">
			<el-scrollbar>
				<div class="panel">
					<el-form :model="sysMenuForm" ref="sysMenuForm" label-width="100px">
						<div class="search-btn">
							<div class="search-btn-left">
								<el-button type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button>
							</div>
						</div>
					</el-form>
					<el-table :data="tableData" border stripe lazy :load="loadTableData" row-key="id"
						style="width: 100%" v-if="tableRefresh">
						<el-table-column prop="menuName" label="菜单名称">
							<template slot-scope="scope">
								<i :class="scope.row.menuIcon"></i><span
									style="margin-left: 5px;">{{scope.row.menuName}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="menuUrl" label="菜单路由"></el-table-column>
						<el-table-column label="操作" min-width="150px">
							<template slot-scope="scope">
								<el-button type="warning" @click="handleUpdate(scope.row.id)">编辑</el-button>
								<el-button type="info" @click="handleSetButtons(scope.row.id)">设置按钮</el-button>
								<el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-scrollbar>
		</div>
		<SysMenu ref="sysMenu"></SysMenu>
		<SysMenuButtons ref="sysMenuButtons"></SysMenuButtons>
	</div>
</template>

<script>
	import SysMenu from "./SysMenu";
	import SysMenuButtons from "./SysMenuButtons.vue";
	export default {
		components: {
			SysMenu,
			SysMenuButtons
		},
		data() {
			return {
				sysMenuForm: {},
				tableData: [],
				tableRefresh: true
			};
		},
		mounted() {
			this.handleSearch();
		},
		methods: {
			handleSearch() {
				this.tableRefresh = false;
				this.$api.post('/menu/findByTreeTable', {parentId: "0"}).then(response => {
					this.tableData = response.data;
					this.tableRefresh = true;
				});
			},
			loadTableData(tree, treeNode, resolve) {
				this.$api.post('/menu/findByTreeTable', {parentId: tree.id}).then(response => {
					resolve(response.data);
				});
			},
			handleAdd() {
				this.$refs.sysMenu.initForm();
			},
			handleUpdate(id) {
				this.$refs.sysMenu.initForm(id);
			},
			handleSetButtons(id) {
				this.$refs.sysMenuButtons.initForm(id);
			},
			handleDelete(id) {
				this.$confirm("确认删除?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$api.post('/menu/delete', {id:id}).then(response => {
						this.$message.success(response.message);
						this.handleSearch();
					});
				});
			}
		}
	};
</script>
